(function () {

    var style = `
        .jwebui-cover{
            content:' ';
            position: fixed;
            z-index: 999;
            top:0;
            right:0;
            width: 100%;
            height: 100%;
            background-color: #00000087;
        }
        .jwebui-model {
            position: fixed;
            z-index: 1000;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
            margin: auto;
            width: 80%;
            height: 80%;
            background: #fff;
            border: 1px solid #0a9892;
            border-top: 0px;
        }
        .jwebui-model .model-header{
            height: 40px;
            line-height: 40px;
            background: #0a9892;
            color: #ffffff;
            padding: 0 10px;
            font-size: 14px;
        }
        .jwebui-model .model-header .close {
            position: absolute;
            right: -1px;
            top: 0px;
            width: 40px;
            height: 40px;
            cursor: pointer;
        }
        
        .jwebui-model .model-header .close:hover {
            background: #ff9900;
        }
        .jwebui-model .model-header .close:before {
            position: absolute;
            content: '';
            width: 20px;
            height: 2px;
            background: white;
            transform: rotate(45deg);
            top: 19px;
            left: 9px;
        }
        .jwebui-model .model-header .close:after{
            content: '';
            position: absolute;
            width: 20px;
            height: 2px;
            background: white;
            transform: rotate(-45deg);
            top: 19px;
            left: 9px;
        }
        .jwebui-model .model-content {
            height: calc(100% - 40px);
            padding: 10px;
            overflow: auto;
        }
    `;


    var template = `
        <div class="jwebui-cover" v-if="show"></div>
        <div class="jwebui-model" v-if="show" :style="modelInfo.style" >
            <div class="model-header" @mousedown="move">
                <slot name="header">{{modelInfo.title}}</slot>
                <div class="close" @click="closeModel"></div>
            </div>
            <div class="model-content">
                <slot></slot>
            </div>
        </div>
    `

    var component = {
        emits: ["close"],
        data() {
            return {
            }
        },
        props: ["title", "show", 'width', 'height'],
        computed: {
            modelInfo: function () {
                var width = this.width ? this.width : '80%;';
                var height = this.height ? this.height : '80%;';
                var style = `width:${width};height:${height}`;
                return {
                    title: this.title ? this.title : '标题',
                    style: style,
                }
            }
        },
        mounted: function () {
        },
        updated: function () {
        },
        watch: {
        },
        methods: {
            closeModel(){
                this.$emit("close");
            },
            move(e){
                this.isMoved = true;
                let odiv = e.target.parentElement; //获取目标元素
                //算出鼠标相对元素的位置
                let oleft = odiv.offsetLeft;
                let otop = odiv.offsetTop;
                let disX = e.clientX;
                let disY = e.clientY;
                document.onmousemove = (e)=>{       //鼠标按下并移动的事件
                    //用鼠标的位置减去鼠标相对元素的位置，得到元素的位置
                    let left = e.clientX - disX;    
                    let top = e.clientY - disY;
                    //绑定元素位置到positionX和positionY上面
                    this.positionX = top;
                    this.positionY = left;
                    
                    //移动当前元素
                    odiv.style.left = oleft + left + 'px';
                    odiv.style.top = otop + top + 'px';
                    odiv.style.margin = "unset";
                };
                document.onmouseup = (e) => {
                    document.onmousemove = null;
                    document.onmouseup = null;
                };
            }    
        },
        template: template,
        style: style
    }

    return component;
})()